<script setup>
import {
  HomeFilled,
  UserFilled,
  Comment,
  PhoneFilled
} from '@element-plus/icons-vue'
</script>

<template>
    <footer>
      <ul className="social_icon">
        <li><a href="#">
          <el-icon><HomeFilled /></el-icon>
        </a></li>
        <li><a href="#">
          <el-icon><UserFilled /></el-icon>
        </a></li>
        <li><a href="#">
          <el-icon><Comment /></el-icon>
        </a></li>
        <li><a href="#">
          <el-icon><PhoneFilled /></el-icon>
        </a></li>
      </ul>
      <ul className="menu">
        <li><a href="#">关于我们</a></li>
        <li><a href="#">相关服务</a></li>
        <li><a href="#">项目团队</a></li>
        <li><a href="#">联系我们</a></li>
        <li><a href="#">加入会员</a></li>
        <li><a href="#">体验分享</a></li>

      </ul>
      <p>@2024 Online Tutorials | All Rights Reserved</p>
    </footer>

</template>

<style scoped>

footer {
  position: relative;
  width: 100%;
  background-color: white;
  min-height: 70px;
  padding: 20px 50px;
  display: flex;
  justify-self: center;
  align-items: center;
  flex-direction: column;
}
img {
  height: 150px;
  width: 170px;
}
footer .social_icon,
footer .menu {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0;
}
footer .social_icon li,
footer .menu li {
  list-style: none;
}
footer .social_icon li a {
  font-size: 1.8em;
  color: black;
  margin: 0 30px;
  display: inline-block;
  transition: 0.5s;
}
footer .social_icon li a:hover {
  transform: translateY(-15px);
}
footer .menu li a {
  font-size: 1.2em;
  color: black;
  margin: 0 30px;
  display: inline-block;
  transition: 0.5s;
  text-decoration: none;
  opacity: 0.75;
  margin-left: 70px;
}
footer .menu li a:hover {
  opacity: 1;
}
footer p {
  color: black;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
  font-size: 1.1em;
}
</style>
